<template>
  <el-dialog
    v-model="dialogFormVisible"
    @close="handleClose"
    :close-on-click-modal="false"
    :title="title"
    width="90%"
    top="5px"
  >
    <div class="kva-container">
      <div class="kva-contentbox">
        <home-page-header>
          <div class="kva-form-search">
            <el-form class="search-form" :inline="true" :model="queryParams" ref="searchForm">
              <el-form-item prop="keyword">
                <el-button
                  type="danger"
                  icon="Delete"
                  v-if="selectIds.length > 0"
                  style="margin-right: 5px"
                  @click="handleBatchRemove"
                  >批量删除</el-button
                >
                <el-button
                  type="success"
                  icon="Check"
                  v-if="selectIds.length > 0"
                  style="margin-right: 5px"
                  @click="handleBatchRecover"
                  >批量恢复</el-button
                >
              </el-form-item>
              <el-form-item prop="keyword">
                <el-input v-model="queryParams.keyword" placeholder="资源名称" maxlength="100" clearable />
              </el-form-item>
              <el-form-item>
                <el-button type="success" icon="Search" @click.prevent="handleSearch">搜索</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="danger" icon="Refresh" @click.prevent="handleReset">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <el-table
            v-loading="tableLoading"
            @selection-change="handleSelectionChange"
            :data="tableData"
            stripe
            border
            height="calc(100vh - 330px)"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column fixed :label="'总数：' + total" width="150" align="center">
              <template v-slot="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="资源标题" prop="title" align="center" />
            <el-table-column label="分类" width="200" align="center">
              <template #default="scope">
                {{ scope.row.categoryPname }}
                <span v-if="scope.row.categoryName">/{{ scope.row.categoryName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="作者" prop="username" width="100" align="center" />
            <el-table-column fixed="right" label="操作" align="center" width="300">
              <template #default="scope">
                <el-button icon="remove" type="danger" @click.stop="handleRemove(scope.row)">彻底删除</el-button>
                <el-button icon="Check" type="success" @click.stop="handleRecover(scope.row)">恢复删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="kva-pagination-box center">
            <el-pagination
              :current-page="queryParams.pageNo"
              :page-size="queryParams.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </home-page-header>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
  import KVA from '@/utils/kva.js'
  import { batchRecovers, batchRemoves, findPagesRecyle, recoverById, removeById } from '@/api/course/index.js'

  // 定义响应式得列表数据容器
  const tableData = ref([])
  const selectIds = ref([])
  const tableLoading = ref(false)
  const pages = ref(0)
  const total = ref(0)
  const searchForm = ref({})
  // 编辑添加相关
  const addRef = ref({})
  const emits = defineEmits(['load'])
  // 控制弹窗得显示
  const dialogFormVisible = ref(false)

  // 加载数据
  const handleLodeData = async () => {
    tableLoading.value = true
    const resp = await findPagesRecyle(queryParams)
    tableLoading.value = false
    tableData.value = resp.data.records
    total.value = resp.data.total * 1
    pages.value = resp.data.pages * 1
  }

  // 搜索
  const handleSearch = () => {
    queryParams.pageNo = 1
    handleLodeData()
  }

  const queryParams = reactive({
    pageNo: 1,
    pageSize: 30,
    status: '',
    keyword: '',
    deleted: 0,
    functionType: 1,
    advertiserId: ''
  })

  // 重置
  const handleReset = () => {
    searchForm.value.resetFields()
    handleSearch()
  }

  // 分页size更改
  const handleSizeChange = (size) => {
    queryParams.pageSize = size
    handleLodeData()
  }

  // 分页pageNo更改
  const handleCurrentChange = (pno) => {
    queryParams.pageNo = pno
    handleLodeData()
  }

  // 彻底删除
  const handleRemove = (row) => {
    KVA.confirm('警告', '<strong>您确定要执行此次【彻底删除】操作吗？</strong>', { icon: 'success' }).then(async () => {
      const opid = row.id
      await removeById(opid)
      KVA.notifySuccess('彻底删除成功!')
      handleLodeData()
    })
  }

  // 恢复删除
  const handleRecover = (row) => {
    KVA.confirm('警告', '<strong>您确定要执行【恢复删除】操作吗？</strong>', { icon: 'success' }).then(async () => {
      const opid = row.id
      await recoverById(opid)
      KVA.notifySuccess('恢复成功!')
      handleLodeData()
    })
  }

  /**
   * 批量删除
   */
  const handleBatchRemove = () => {
    if (selectIds.value && selectIds.value.length == 0) {
      KVA.notifyError('请选择一个项进行操作！')
      return
    }

    KVA.confirm('警告', '<strong>您确定要执行此次【批量删除】操作吗？</strong>', { icon: 'success' }).then(async () => {
      const ids = selectIds.value.join(',')
      await batchRemoves(ids)
      KVA.notifySuccess('批量删除成功!')
      handleLodeData()
    })
  }

  /**
   * 批量恢复
   */
  const handleBatchRecover = () => {
    if (selectIds.value && selectIds.value.length == 0) {
      KVA.notifyError('请选择一个项进行操作！')
      return
    }

    KVA.confirm('警告', '<strong>您确定要执行此次【批量恢复】操作吗？</strong>', { icon: 'success' }).then(async () => {
      const ids = selectIds.value.join(',')
      await batchRecovers(ids)
      KVA.notifySuccess('批量恢复成功!')
      handleLodeData()
    })
  }

  const handleOpen = () => {
    dialogFormVisible.value = true
    handleLodeData()
  }

  const handleClose = () => {
    dialogFormVisible.value = false
    emits('load')
  }

  /**
   * 选择删除的元素
   * @param rows
   */
  const handleSelectionChange = (rows) => {
    selectIds.value = rows.map((c) => c.id)
  }

  defineExpose({
    handleOpen
  })
</script>
